import { ref } from 'vue';
import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { list as deviceTypeList } from '../deviceType/deviceType.api';
import { getDeviceModelByType } from '../deviceModel/deviceModel.api';
import { h } from 'vue';
import { Icon } from '/@/components/Icon';
import { render } from '/@/utils/common/renderUtils';
import { isNullOrUnDef, isEmpty } from '/@/utils/is';



const type = [
  {label: '点位', value: 1},
  {label: '自定义', value: 2},
];

const accuracyOptions = [
  {label: '0位', value: 0},
  {label: '1位', value: 1},
  {label: '2位', value: 2},
  {label: '3位', value: 3},
  {label: '4位', value: 4},
  {label: '5位', value: 5},
];

// HEX, UTF8, ASCII
const encode = [
  {label: 'HEX', value: 'HEX'},
  {label: 'UTF8', value: 'UTF8'},
  {label: 'ASCII', value: 'ASCII'},
];

export const paramDeviceTypeId = ref('');

export const columns: BasicColumn[] = [
  {
    title: '组名称',
    dataIndex: 'name',
    width: 200,
    align: 'left',
  },
  {
    title: '设备类型',
    dataIndex: 'typeName',
    width: 120,
  },
  {
    title: '设备型号',
    dataIndex: 'modelName',
    width: 120,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'modelId',
    label: '设备型号',
    component: 'ApiSelect',
    colProps: { span: 6 },
    componentProps: ({ formModel }) => {
      return {
        api: getDeviceModelByType,
        params: {typeId: paramDeviceTypeId.value},
        labelField: 'model',
        valueField: 'id',
        getPopupContainer: () => document.body,
      };
    },
  },
  {
    field: 'name',
    label: '组名称',
    component: 'Input',
    colProps: { span: 6 },
  },
];

export const formSchema: FormSchema[] = [
  {
    label: 'id',
    field: 'id',
    component: 'Input',
    show: false,
  },
  {
    label: '组名称',
    field: 'name',
    component: 'Input',
    required: true,
  },
  {
    label: '设备类型',
    field: 'typeId',
    component: 'ApiTreeSelect',
    defaultValue: paramDeviceTypeId.value,
    componentProps: {
      api: deviceTypeList,
      immediate: true,
      expandAll: true,
      resultField: 'data',
      fieldNames: {
        label: 'name',
        key: 'id',
        value: 'id',
      },
      dropdownStyle: {
        maxHeight: '50vh',
      },
      getPopupContainer: () => document.body,
    },
  },
  {
    label: '所属型号',
    field: 'modelId',
    component: 'ApiSelect',
    required: true,
    componentProps: ({ formModel }) => {
      return {
        api: getDeviceModelByType,
        params: {typeId: formModel.typeId},
        labelField: 'model',
        valueField: 'id',
        getPopupContainer: () => document.body,
      };
    },
  }, 
  {
    label: '点位列表',
    field: 'signalIds',
    component: 'Input',
    slot: 'signalId',
  },
];